<template>
   <div class="wrap">
      <v-carousel :list="list" :wpTitle="carTitle"></v-carousel>
      <v-tabs :tabList="tabList" :tabs="tabs" @getData="getData"></v-tabs>
      <div class="service_box">
         <ul>
            <li v-for="(item,index) in serviceList">
               <router-link :to="'/msg_product?c='+c+'&id=' + (index+1)"><img :src="apiurl+item.picture"></router-link>
               <router-link :to="'/msg_product?c='+c+'&id=' + (index+1)" class="name">{{ item.title }}</router-link>
            </li>
         </ul>
         <v-page :pages="pagerList"></v-page>
      </div>
   </div>
</template>

<script>
import vCarousel from './components/carousel'
import vPage from './components/page'
import vTabs from './components/tabs'
export default {
   data() {
      return {
         list: [],
         carTitle: 'SERVICE',
         c: '',
         tabList: [],
         serviceList: [],
         pagerList: [],
         tabs: true
      }
   },
   components: {
      vCarousel,vPage,vTabs
   },
   methods: {
      getData (identifier){
         let _this = this;
         
         // ajax获取数据
         this.ajax('?c=list&cs='+identifier+'&wxapp_skin=', function (res){
            _this.serviceList = res.data.data;
            _this.pagerList = res.data.data2;
            _this.tabList = res.data.data3;
            _this.carTitle = res.data.data4.cate_name;
            _this.c = res.data.data4.identifier;
            if (_this.tabList.length <= 3) {
               _this.tabs = true;
            }else{
               _this.tabs = false;
            }
         });
      }
   },
   mounted (){
     
      let _this = this;

      // ajax获取数据
      this.ajax('?c=list&cs=cp&wxapp_skin=', function (res){
         _this.serviceList = res.data.data;
         _this.pagerList = res.data.data2;
         _this.tabList = res.data.data3;
         _this.carTitle = res.data.data4.cate_name;
         _this.c = res.data.data4.identifier;
         if (_this.tabList.length <= 3) {
            _this.tabs = true;
         }else{
            _this.tabs = false;
         }
         _this.list = _this.$store.getters.getCar;
      });

   }
}
</script>

<style scoped>
   .service_box{overflow: hidden; padding: 0 .05rem;}
   .service_box li{width:48%; float: left; margin-right:1.5%; text-align: center;}
   .service_box li:nth-of-type(2n){float: right; margin-right: 0;}
   .service_box li img{width:100%;}
   .service_box li a{display: block; line-height: 0;}
   .service_box li .name{height: .4rem; line-height: .4rem; display: block; color:#5a5a5a;}
</style>